<template>
    <div class="about">
        <div class="site-content">
            <div class="content-warp">
                <template class="info-card">
                    <el-form ref="registerForm" :model="registerForm" :rules="registerRules" class="register-form">
                        <h3 class="title">账号注册</h3>
                        <el-form-item prop="username">
                            <el-input v-model="registerForm.username" type="text" auto-complete="off" placeholder="账号">
                            </el-input>
                        </el-form-item>
                        <el-form-item prop="password">
                            <el-input
                                    v-model="registerForm.password"
                                    type="password"
                                    auto-complete="off"
                                    placeholder="密码"
                                    @keyup.enter.native="handleRegister"
                            >
                            </el-input>
                        </el-form-item>
                        <el-form-item prop="passwordRepeat">
                            <el-input
                                    v-model="registerForm.passwordRepeat"
                                    type="password"
                                    auto-complete="off"
                                    placeholder="确认密码"
                                    @keyup.enter.native="handleRegister"
                            >
                            </el-input>
                        </el-form-item>
                        <el-form-item prop="code" v-if="captchaEnabled">
                            <el-input
                                    v-model="registerForm.code"
                                    auto-complete="off"
                                    placeholder="验证码"
                                    style="width: 65%"
                                    @keyup.enter.native="handleRegister"
                            >
                            </el-input>
                            <div class="register-code">
                                <img :src="codeUrl" @click="getCode" class="register-code-img"/>
                            </div>
                        </el-form-item>
                        <el-form-item style="width:100%;">
                            <el-button
                                    :loading="loading"
                                    size="medium"
                                    type="primary"
                                    style="width:100%;"
                                    @click.native.prevent="handleRegister"
                            >
                                <span v-if="!loading">注 册</span>
                                <span v-else>注 册 中...</span>
                            </el-button>
                            <div style="float: right;">
                                <router-link class="link-type" to="/login">使用已有账户登录</router-link>
                            </div>
                        </el-form-item>
                    </el-form>
                </template>
            </div>
        </div>
    </div>
</template>

<script>
    import {getCodeImg,register} from "../api/loginOrRegister";
    export default {
        name: "Register",
        data() {
            const equalToPassword = (rule, value, callback) => {
                console.log(this.registerForm.password)
                console.log(value)
                if (this.registerForm.password !== value) {
                    callback(new Error("两次输入的密码不一致"));
                } else {
                    callback();
                }
            };
            return {
                codeUrl: "",
                registerForm: {
                    username: "",
                    password: "",
                    passwordRepeat: "",
                    code: "",
                    uuid: ""
                },
                registerRules: {
                    username: [
                        { required: true, trigger: "blur", message: "请输入您的账号" },
                        { min: 2, max: 20, message: '用户账号长度必须介于 2 和 20 之间', trigger: 'blur' }
                    ],
                    password: [
                        { required: true, trigger: "blur", message: "请输入您的密码" },
                        { min: 5, max: 20, message: '用户密码长度必须介于 5 和 20 之间', trigger: 'blur' }
                    ],
                    passwordRepeat: [
                        { required: true, trigger: "blur", message: "请再次输入您的密码" },
                        { required: true, validator: equalToPassword, trigger: "blur" }
                    ],
                    code: [{ required: true, trigger: "change", message: "请输入验证码" }]
                },
                loading: false,
                captchaEnabled: true
            };
        },
        created() {
            this.getCode();
        },
        methods: {
            getCode() {
                getCodeImg().then(res => {
                    this.captchaEnabled = res.captchaEnabled === undefined ? true : res.captchaEnabled;
                    console.log(res)
                    if (this.captchaEnabled) {
                        this.codeUrl = res.img;
                        this.registerForm.uuid = res.uuid;
                        // this.registerForm.code = res.imgCode;
                    }
                });
            },
            handleRegister() {
                this.$refs.registerForm.validate(valid => {
                    if (valid) {
                        this.loading = true;
                        register(this.registerForm).then(res => {
                            const username = this.registerForm.username;
                            this.$alert("<font color='red'>恭喜你，您的账号 " + username + " 注册成功！</font>", '系统提示', {
                                dangerouslyUseHTMLString: true,
                                type: 'success'
                            }).then(() => {
                                this.$router.push("/login");
                            }).catch(() => {});
                        }).catch(() => {
                            this.loading = false;
                            if (this.captchaEnabled) {
                                this.getCode();
                            }
                        })
                    }
                });
            }
        }
    }
</script>

<style scoped lang="less">
    .about {
        padding-top: 40px;
    }

    .content-warp {
        margin-top: 120px;
        width: 500px;
        margin-left: 150px;
        .about-info {
            margin: 30px 0;

            span {
                color: red;
                margin-right: 10px;
            }

            .info-card {
                min-height: 400px;
                padding: 20px;
                border-radius: 3px;
                margin: 30px 0 50px 0;
                box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);

                p {
                    line-height: 1.7rem;
                }
            }
        }

        .contactForm {
            width: 100%;
            padding: 20px;

            .form-item {
                align-items: center;
                display: flex;

                &:not(:last-child) {
                    margin-bottom: 20px;
                }

                label {
                    width: 80px;
                }

                .v {
                    min-height: 40px;
                    line-height: 20px;
                    border-radius: 3px;
                    padding: 2px 10px;
                    outline: none;
                    border: 1px solid #8fd0cc;
                    width: 100%;
                    resize: vertical;
                }

                button {
                    width: 100px;
                    height: 40px;
                    border-radius: 3px;
                    outline: 0;
                    border-style: none;
                    cursor: pointer;
                    background-color: #409eff;
                    color: white;

                    &:hover {
                        opacity: 0.8;
                    }
                }
            }
        }
    }

    /*******/
    @media (max-width: 800px) {
        .content-warp {
            margin-top: 0;
        }
    }

    .title {
        margin: 0px auto 30px auto;
        text-align: center;
        color: #707070;
    }
    .register-code {
        width: 33%;
        height: 38px;
        float: right;
        img {
            cursor: pointer;
            vertical-align: middle;
        }
    }
    .register-code-img {
        padding-left: 35px;
        height: 38px;
    }

    .title {
        margin: 0px auto 30px auto;
        text-align: center;
        color: #707070;
    }
</style>
